<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
    <title>查询考试成绩</title>
    <link rel="stylesheet" href="css/style.css">
    <link href="css/jquery.searchableSelect.css" rel="stylesheet" type="text/css">
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/jquery.searchableSelect.js"></script>
    <link rel="stylesheet" href="js/layui/css/layui.css">
    <script src="js/layui/layui.js"></script>
</head>
<body class="login-bg">
<div class="login-contain">
    <div class="login-header">
        <p>查询考试成绩</p>
    </div>
    <div class="form-group">
        <form id="form" class="layui-form">
            <div class="form-item">
                <input id="phone" name="phone" type="phone" placeholder="请输入手机号">
            </div>
        </form>
    </div>
    <div class="button-group">
        <button class="login-btn" id="submit" lay-submit="" lay-filter="submit">查询成绩</button>
    </div>
</div>

<script>
    //一般直接写在一个js文件中
    layui.use(['layer', 'form'], function () {
        var layer = layui.layer
            , form = layui.form;

        //监听提交
        form.on('submit(submit)', function (data) {
            var phone = $("#phone").val();
            if (phone == '') {
                alert('手机号未填写');
                return;
            }
            $.ajax({
                type: 'post',//方法类型
                dataType: 'json',//预期服务器返回的数据类型
                url: '/examSystem/web/query',
                data: $('#form').serialize(),
                success: function (result) {
                    if (result.code == 0) {
                        window.location.href = "rank.html?phone=" + phone;
                    } else {
                        alert(result.msg);
                    }
                },
                error: function () {
                    alert("系统异常");
                }
            });
            return false;
        });
    });
    $(function () {
        $(window).resize();
    });
    //js设置居中
    $(window).resize(function () {
        $(".login-contain").css({
            position: "absolute",
            left: ($(window).width() - $(".login-contain").outerWidth()) / 2,
            top: ($(window).height() - $(".login-contain").outerHeight()) / 2.5
        });
    });

</script>
</body>
</html>
